<!DOCTYPE html>
<html>
<head>
	<% include link %>
	<style type="text/css">
		.player{
			position: relative;
			overflow: hidden;
		}
		.playerdiv{
			position: relative;
			overflow: hidden;
			z-index: 10;
		}
		
		#danmuku{
			position: absolute;
			overflow: hidden;
			top: 0px;
			left: 0px;
			width: 1170px;
			height: 600px;
			z-index: 12;
		}
		.userDo{
			display: block;
			float: left;
			line-height: 64px;
			/*color: #337ab7;*/
			/*text-align: center;*/
		}
		.keep{
			cursor: pointer;
			color: #337ab7;
		}
		.keep:hover{
			color: #0089ff;
		}
	</style>
</head>
<body>
	<% include head %>
	<% include subtitle %>
	<div class="container">
		<div class="row" style="margin-bottom: 20px;">
		</div>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-8">
				<h2>
					<%-video.name%>
				</h2>
				<p><%-video.tag%></p>
			</div>
			<div class="col-md-4">
				<div class="col-md-4">
					<a href="/userhome/<%-video.upUser._id%>">
						<img class="img-circle" src="<%-video.upUser.headImgUrl%>" style="display:block;width:80px;height:auto;">
					</a>
				</div>
				<div class="col-md-8">
					<h4><a href=""><%-video.upUser.name%></a></h4>
					<p style="color:rgb(195,195,195);max-height:60px;text-overflow:ellipsis;overflow:hidden;">简介:<%-video.upUser.motto%></p>
					<button class="fansbt button button-primary button-rounded button-small">关注</button>
					<button class="button button-primary button-rounded button-small">打赏</button>

				</div>
			</div>
		</div>
	</div>
	<div class="container">
		<!-- Advertisement -->
		<!-- Advertisement -->
		<!-- Advertisement -->
		<div class="row" style="margin-bottom: 20px;">
		</div>
	</div>
	<div class="container">
		<div class="row player">
			<div class="" style="width:1170px;height:auto;">
				<div class="playerdiv">
					<video id="video" controls style="width:1170px;height:auto;z-index:5;">
						<source src="/video/<%-video.path%>" type="video/mp4">
					</video>
				</div>
				<canvas id="danmuku" width="1170" height="600"></canvas>
				<span id="ruler" style="visibility:hidden;font-size:24px;"></span>
				<div class="row">
					<div class="col-md-10">
						<input id="danmuInput" type="text" class="form-control" style="">
					</div>
					<div class="col-md-2">
						<button id="sendBtn" style="height:34px;display: block;width: 100%;" class="button button-rounded button-primary button-tiny" onclick="sendDanmuClick()">发送</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="row" style="height:50px;width:80%;">
		
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-2">
				<a class="share" data-url="<%-video._id%>" href="">
					<img class="userDo" src="/images/share.png">
					<p class="userDo">share</p>
				</a>
				<script>
					$('.share').click(function(){
						var u = $(this).data('url')
						var name = '<%-video.name%>'
						var info = '<%-video.info%>'
						u = encodeURIComponent('http://localhost:3000/video/av/'+u)
						name = encodeURIComponent(name)
						info = encodeURIComponent(info)
						var share = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http%3A%2F%2Fwww.bilibili.com%2Fvideo%2Fav7553202%2F&title='+name+'&showcount=1&summary='+info+'&pics=&style=203&width=98&height=22'
						window.open(share);
					})
				</script>
			</div>
			<div class="col-md-2">
				<div class="keep">
					<img class="userDo" src="/images/keep.png">
					<p class="userDo">keep</p>
				</div>
				<script>
					$('.keep').click(function(){
						if (user===null) {
							alert('please login')
						}else{
							$.ajax({
								url:'/video/av/keep/<%-video._id%>',
								type:'get',
								success:function(data){
									console.log(data)
								}
							})
						}
					})
				</script>
			</div>
			<div class="col-md-2">
				<img class="userDo" src="/images/heiheihei.png">
				<p class="userDo">heiheihei</p>
			</div>
		</div>
	</div>
	<div class="row" style="height:50px;width:80%;">
		
	</div>
	<div class="container" id="showBtnDiv">
		<div class="row" >
			<button id="showComments" class="button button-glow button-border button-rounded 	button-primary" style="margin:0px auto;display:block;">查看与评论</button>
		</div>
	</div>
	<div class="container comments" style="display:none;">
		<div class="row">
			<textarea type="textarea" class="form-control" 	placeholder="content"></textarea>
			<button style="margin:0px auto;display:block;" class="button button-glow button-small button-border button-rounded button-primary submit">
				提交
			</button>
		</div>
		<div style="height:50px;" class="text"></div>
	</div>
<!-- <script src="/socket.io/socket.io.js"></script> -->
<script src="/js/canvasDrawDanmu.js"></script>
<script src="/js/ClientComments.js"></script>
<script>
	var isFans = '<%-isFans%>';
	var fansPost;
	if(isFans=="true"){
		$('.fansbt').html('已关注');
	} else {
		$('.fansbt').html('关注');
	}

	$('.fansbt').click(function() {
		if(isFans=="true"){
			isFans  = 'false';
			fansPost = '/articles/read/refans';
			$('.fansbt').html('关注');
		} else {
			isFans = 'true';
			fansPost = '/articles/read/addfans';
			$('.fansbt').html('已关注');
		}
		var self = $(this);
		var fid = '<%-user._id%>';
		var name = '<%-video.upUser.name%>';
		$.ajax({
			url:fansPost,
			type:'post',
			data:{
				addfans:{
				 	'name': name,
				 	'FID': fid,
				}
			},
			success:function(data){
			}
		});
	});

	function sendComment(json){
		if (json.user === null || json.user === '') {
			alert('please login')
		} else {
				$.ajax({
				url:'/video/av/comments/<%-av%>',
				type:'post',
				data:json,
				success:function(data){
					$('textarea').val('')
					insertComments(json)
				}
			})
		}
	}

	function getComents(){
		$.ajax({
			url:'/video/av/comments/<%-av%>',
			type:'get',
			data:'',
			success:function(obj){
				var arr = obj[0].comments
				for (var i = 0; i <= arr.length-1; i++) {
					insertComments(arr[i]);
				}
			}
		})
	}




























	var playstatus = false;
	var video = document.getElementById('video')
	
	$('#danmuku').click(function(){
		if (playstatus) {
			video.pause();
			playstatus = false;
			clearInterval(danmuSetInterval);
		} else {
			video.play();
			playstatus = true;
			danmuSetInterval = setInterval(function(){ //public
				var pt = video.currentTime;
				danmuPool.forEach(function(value, key){
					if (pt<value.vtime+0.06 && pt>value.vtime-0.06) {
						setDanmu(value)
						delete danmuPool[key]
					}
				})

			},80)
		}
	})
	function sendDanmuClick(){
		if ($('#danmuInput').val()!='' && user!=null) {
			var obj = {
				uid:user.userid,
				danmuTxt:$('#danmuInput').val(),
				color:{r:20,g:167,b:228},
				vtime:video.currentTime
			}
			sendDanmu(obj)
			setDanmu(obj)
		} else {
			alert('please login')
		}
	}
	function setDanmu(obj){
		var times = new Date().getTime()
		var selrow = 0
		if (obj.dir == 'ltr')
		{
			for (var i = 0 ; i < totrow; i++) {
				if (hRow[i] < hRow[selrow]) { selrow = i; }
			}
			hRow[selrow] = hRow[selrow] + 1;
		} else {
			for (var i = 0 ; i < totrow; i++) {
				if (rRow[i] < rRow[selrow]) { selrow = i; }
			}
			rRow[selrow] = rRow[selrow] + 1;
		}
		$("#ruler").html(obj.danmuku);
		onDisplay.set(times , { 
			text : obj.danmuTxt , 
			pos : selrow , 
			len : $("#ruler")[0].offsetWidth , 
			color : obj.color,
			dir : 'ltr'
		});
	}
	function sendDanmu(danmu){
		$.ajax({
			type:'post',
			url:'/video/av/danmu/<%-av%>',
			data:danmu,
			success:function(data){
				console.log('ok')
			}
		})
	}
	var danmuPool = new Array();
	danmuPool = [
		{
			uid:'ssss',
			danmuTxt:'222333',
			color:{r:20,g:167,b:228},
			vtime:1
		},
		{
			uid:'ssss',
			danmuTxt:'lvkfo',
			color:{r:20,g:167,b:228},
			vtime:2
		},
		{
			uid:'ssss',
			danmuTxt:'asdvf',
			color:{r:20,g:167,b:228},
			vtime:3
		},
		{
			uid:'ssss',
			danmuTxt:'faaaaaaaaaa',
			color:{r:20,g:167,b:228},
			vtime:4
		},
		{
			uid:'ssss',
			danmuTxt:'ewrffddsf',
			color:{r:20,g:167,b:228},
			vtime:10
		},
		{
			uid:'ssss',
			danmuTxt:'dsfrew',
			color:{r:20,g:167,b:228},
			vtime:5
		},
		{
			uid:'ssss',
			danmuTxt:'rsssa',
			color:{r:20,g:167,b:228},
			vtime:1
		}
	];

	

</script>
</body>